<template>
<div id="goodsList">
    <!--添加商品-->
    <el-row>
        <el-col :span="6">
            <el-input placeholder="请输入内容" v-model="text" class="input-with-select">
                <el-button slot="append" icon="el-icon-search" @click="search"></el-button>
            </el-input>
        </el-col>
        <el-col :span="6">
        <router-link  to="/goodsList/add" tag="el-button"  type="primary" class="add">添加商品</router-link>
        </el-col>
    </el-row>
    <!--编辑商品的弹窗-->
        <!--el-dialog
            title="编辑商品信息"
            :visible.sync="edit.dialogVisible"
            width="30%"
            :before-close="handleClose">
            <el-form ref="form" :model="edit" label-width="80px">
                <el-form-item label="商品名称">
                    <el-input v-model="edit.name"></el-input>
                </el-form-item>
                <el-form-item label="商品价格">
                    <el-input v-model="edit.price"></el-input>
                </el-form-item>
                <el-form-item label="商品数量">
                    <el-input v-model="edit.num"></el-input>
                </el-form-item>
                <el-form-item label="商品重量">
                    <el-input v-model="edit.weight"></el-input>
                </el-form-item>
            </el-form>
                <span slot="footer" class="dialog-footer">
                    <el-button @click="edit.dialogVisible = false">取 消</el-button>
                    <el-button type="primary" @click="subEdit" >确 定</el-button>
                </span>
        </el-dialog-->
    <!--商品列表-->
     <el-table :data="goodsList" border style="width: 100%" class="list">
        <el-table-column prop="index" label="#" width="50"></el-table-column>
        <el-table-column prop="goods_name" label="商品名称" width="900"></el-table-column>
        <el-table-column prop="goods_price" label="商品价格（元）" ></el-table-column>
        <el-table-column prop="goods_weight" label="商品重量" ></el-table-column>
        <el-table-column prop="add_time" label="创建时间"  width="300">
            <template slot-scope="slot">
                {{slot.row.add_time | moment("YYYY-MM-DD hh:mm:ss ")}}
            </template>
        </el-table-column>
        <el-table-column prop="" label="操作" width="150" >
            <template slot-scope="scope">
                <!--el-button-- type="primary" icon="el-icon-edit" size="mini" @click="editGoods(scope.row)"></!--el-button-->
                <el-button type="danger" icon="el-icon-delete" size="mini" @click="del(scope.row)"></el-button>
             </template>
        </el-table-column>
    </el-table>
    <!--页码-->
     <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="1"
        :page-sizes="[ 2, 5, 10,15]"
        :page-size="10"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total">
    </el-pagination>
</div>
</template>

<script>
export default {
   data(){
        let validatePass = (rule, value, callback) => {
            if(value==""){
                  return callback(new Error('内容不能为空'));
            }
            else if (isNaN(value)&&value!=NaN) {
                return callback(new Error('请输入数字'));
                }
      };
        return{
            text:"",
            goodsList:[], //商品列表
            pagenum:1, //，默认显示那一页
            pagesize:10,//每页显示多少条
            total:0, //总共多少条数据
            dialogAddGoods: false,
           /* edit:{
               dialogVisible:false,
               name:"",
               price:"",
               num:"",
               id:"",
               weight:""
            },*/
            rules: {
            name: [
                    { required: true, message: '请输入商品名称', trigger: 'blur' },
                  ],
            price:[
                     { required: true,validator: validatePass, trigger: 'blur' , },
                ],
            num:[
                    { required: true,validator: validatePass, trigger: 'blur' , },
                ],
            weight:[
                    { required: true,validator: validatePass, trigger: 'blur' , },
                ]
            }
         }
        },
    methods:{
        getGoodsList(){
            this.$http.get("goods",{
                params: {pagenum:this.pagenum,pagesize:this.pagesize},
                headers:{"Authorization":localStorage.getItem("token")}})
            .then(res=>{
                this.goodsList = res.body.data.goods
                this.total = res.body.data.total
                this.goodsList.forEach((item,i)=>{
                   item.index = i+1
                })
              //  console.log(res.body)
            })
        },
        handleSizeChange(val) {
           this.pagesize = val;
           this.getGoodsList()
        },
        handleCurrentChange(val) {
          this.pagenum = val
         this.getGoodsList()
        },
  
        //删除商品
        del(row){
          this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
            center: true
            })
            .then(() => {
                this.$http.delete("goods/"+row.goods_id,{headers:{"Authorization":localStorage.getItem("token")}})
                .then(res=>{
                    if(res.body.meta.status == 200){
                        this.getGoodsList()
                         this.$message({
                        type: 'success',
                        message: '删除成功!'
                        });
                     }
                    else{
                     this.$message.error('删除失败');
                    }
                })
           }).catch(() => {
            this.$message({
                type: 'info',
                message: '已取消删除'
            });
            });
        },
        //搜索商品
        search(){
           this.$http.get("goods",{
                params: {pagenum:this.pagenum,pagesize:this.pagesize,query:this.text},
                headers:{"Authorization":localStorage.getItem("token")}}).then(res=>{
                    if(res.body.meta.status == 200){
                            this.goodsList = res.body.data.goods
                            this.goodsList.forEach((item,i)=>{
                            item.index = i+1
                        })
                            this.total = res.body.data.total
                            console.log(res.body)
                     }
                })
          },
        //编辑商品的弹窗
         /* editGoods(row){
              this.edit.dialogVisible = true
              this.edit.name = row.goods_name
              this.edit.price = row.goods_price
              this.edit.num = row.goods_number
              this.edit.id = row.goods_id
              this.edit.weight = row.goods_weight
              console.log(row)
          },*/
        //提交编辑
         /* subEdit(){
              this.edit.dialogVisible = false 
              this.$http.put("goods/"+this.edit.id,
              {id:this.edit.id,goods_name:this.edit.name,goods_price:this.edit.price,goods_number:this.edit.num,goods_weight:this.edit.weight},
              {headers:{'Authorization':localStorage.getItem('token')}})
              .then(res=>{
                  console.log(res.body)
              })
          },*/
        handleClose(done) {
            this.$confirm('确认关闭？')
            .then(_ => {
                done();
            })
            .catch(_ => {});
        }
    },
    created(){
        this.$store.commit("changeTitle",{"t1":"商品管理","t2":"商品列表"})
        this.getGoodsList()
    }
}
</script>

<style lang="scss" scoped>
  #goodsList{
      .el-col{
          margin-left: 10px
      }
      .list{
          margin:20px 0
      }
      .add{
          color: #FFF;
        background-color: #409EFF;
        border-color: #409EFF;
      }
  }
</style>